<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
</head>
<style>
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    body {
        background: #23384e;
    }

    .search,
    .search .box,
    .search .inner-box {
        height: 34px;
    }

    .search {
        position: relative;
        width: 350px;
        margin: 10px auto;
    }

    .search .box {
        background-position: right 0;
    }

    .search .inner-box {
        background-repeat: repeat-x;
        background-position: 0 -34px;
        margin: 0 20px 0 40px;
    }

    .search .select {
        float: left;
        color: red;
        width: 190px;
        height: 30px;
        border: 5px solid #58bc58;
        cursor: pointer;
        /* 光标显示成手型 */
        margin-top: 4px;
        line-height: 22px;
        padding-left: 10px;
        background-position: 0 -68px;
        text-align: center;
        border-radius: 20px;
    }

    .search a {
        float: left;
        width: 80px;
        height: 24px;
        color: yellow;
        letter-spacing: 4px;
        line-height: 24px;
        text-align: center;
        text-decoration: none;
        background-position: 0 -90px;
        margin: 5px 25%;

    }

    .search a:hover {
        color: #f60;
        background-position: -80px -90px;
    }

    .search ul {
        position: absolute;
        top: 26px;
        left: 40px;
        color: red;
        width: 198px;
        background: #58bc58;
        border: 3px solid orange;
        display: none;

    }

    .search ul li {
        height: 25px;
        line-height: 24px;
        cursor: pointer;
        padding-left: 10px;
        margin-bottom: -1px;
        border-bottom: 1px dotted #fff;
        color: red;
        text-align: center;
    }

    .search ul li:hover,
    .search ul li.active {
        background: #8b8b8b;
    }
</style>

<body>
    <div class="search">
        <div class="box">
            <div class="inner-box">
                <input type="text" id="keyword" class="select" autocomplete="off" placeholder="请选择游戏名称">
                <a href="#">搜索</a>
            </div>
        </div>
        <ul class="list">
            <li>地下城与勇士</li>
            <li>魔兽世界（国服）</li>
            <li>魔兽世界（台服）</li>
            <li>热血江湖</li>
            <li>大话西游II</li>
            <li>QQ幻想世界</li>
        </ul>
    </div>
    <script>
        var keyword = document.querySelector('#keyword');
        var list = document.querySelector('.list');
        var lists = document.querySelectorAll('.list>li');
        // 绑定获取焦点事件
        keyword.onclick = function (event) {
            list.style.display = 'block';
            var index = -1;
            document.onkeydown = function (e) {
                // 按下下键
                if (e.keyCode === 40) {
                    index++;
                    if (index > lists.length - 1) {
                        index = 0;
                    }
                    // 排他思想
                    for (var i = 0; i < lists.length; i++) {
                        lists[i].className = '';
                    }
                    lists[index].className = 'active';
                }
                if (e.keyCode === 38) {
                    index--;
                    if (index < 0) {
                        index = lists.length - 1;
                    }
                    for (var i = 0; i < lists.length; i++) {
                        lists[i].className = '';
                    }
                    lists[index].className = 'active';
                }
                if (e.keyCode === 13) {
                    // 把当前选中的li的内容赋值给 搜索框 lists[index]
                    // console.log(lists[index].innerHTML);
                    keyword.value = lists[index].innerHTML;
                    list.style.display = 'none';
                    keyword.blur();
                }

            }
            // 点击li的时候，把li的内容赋值给keyword
            lists.forEach(function (items, index) {
                items.onclick = function () {
                    keyword.value = this.innerHTML;
                }
            })

            // 阻止事件的传播
            event.cancelBubble = true;
        }

        // 失去焦点的时候 隐藏下拉菜单
        // keyword.onblur = function () {
        //     list.style.display = 'none';
        // }
        document.onclick = function () {
            list.style.display = 'none';
        }

    </script>


</body>

</html>